<script setup lang="ts">
import { useAppStore } from "@/store/modules/app.store";
const { bannerList } = useAppStore();

const formRef = ref() as Ref<any>;

const form = ref({
  name: "",
  phone: "",
  prepayment: ""
});
const rules = ref({
  name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  phone: [{ required: true, message: "请输入手机号", trigger: "blur" }]
});

const submitForm = async () => {
  const valid = await formRef.value.validate();
  console.log(valid);
};
</script>

<template>
  <view class="content">
    <up-swiper
      height="350rpx"
      indicator
      bg-color="transparent"
      radius="10"
      :list="bannerList"
      name="url"
      mode="dot"
    ></up-swiper>
    <view class="main">
      <up-form :model="form" :rules="rules" ref="formRef" label-width="120rpx">
        <up-form-item required border-bottom label="姓名" prop="name">
          <up-input v-model="form.name" placeholder="请输入姓名" />
        </up-form-item>
        <up-form-item required border-bottom label="电话" prop="phone">
          <up-input
            v-model="form.phone"
            maxlength="11"
            type="number"
            placeholder="请输入电话号码"
          />
        </up-form-item>
        <up-form-item border-bottom label="预付款">
          <up-input v-model="form.prepayment" placeholder="请输入预付款" />
        </up-form-item>
        <up-form-item>
          <up-button type="success" size="large" @click="submitForm">创建订单</up-button>
        </up-form-item>
      </up-form>
    </view>
  </view>
</template>
<style scoped lang="scss">
page {
  height: 100%;
}
/* #ifdef MP-WEIXIN */
::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
}
/* #endif */

.content {
  padding: 0 15rpx;
  background-color: #fff;
  height: 100vh;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  //   background-image: url("https://bbl-1329058988.cos.ap-beijing.myqcloud.com/stick/assets/stick_bg.jpg");
  background-size: cover;
  background-position: center;
  .main {
    flex: 1;
    padding: 20rpx;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.8);
    .haction {
      & + .haction {
        margin-top: 100rpx;
      }
    }
  }
}
</style>
